<template>
  <div class="view_page">
    <el-card
      class="box-card"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <!--卡片头部-->
      <div slot="header" class="clearfix">
        <!--左侧-->
        <div class="left">
          <div class="back-page">
            <div class="add-back" @click="back">
              <i class="fa fa-arrow-left" aria-hidden="true"></i>
              <span>设备列表详情</span>
            </div>
          </div>
        </div>
      </div>
      <!--卡片内容-->
      <div class="card-centont">
        <el-form :model="liveData" label-width="130px">
          <el-form-item label="设备状态">
            <el-input
              v-model="is_state"
              :disabled="true"
              placeholder="请输入设备状态"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备历史情况" v-if="lsQK">
            <div
              v-if="
                liveData.equipment_type == 1 ||
                  liveData.equipment_type == 2 ||
                  liveData.equipment_type == 4
              "
            >
              <div
                id="main"
                style="width:100%; height: 240px"
                ref="LineChart124"
              ></div>
            </div>
            <div v-if="liveData.equipment_type == 3">
              <div
                id="main"
                style="width:100%; height: 240px"
                ref="LineChart3_1"
              ></div>
              <div
                id="main"
                style="width:100%; height: 240px"
                ref="LineChart3_2"
              ></div>
              <div
                id="main"
                style="width:100%; height: 240px"
                ref="LineChart3_3"
              ></div>
            </div>
            <div v-if="liveData.equipment_type == 5">
              <div
                id="main"
                style="width:100%; height: 240px"
                ref="LineChart5"
              ></div>
            </div>
            <div v-if="liveData.equipment_type == 6">
              <div
                id="main"
                style="width:100%; height: 240px"
                ref="LineChart6"
              ></div>
            </div>
          </el-form-item>
          <div style="display: flex;">
            <div style="width:50%">
              <el-form-item label="设备名称">
                <el-input
                  v-model="liveData.name"
                  :disabled="true"
                  placeholder="请输入设备名称"
                ></el-input>
              </el-form-item>
            </div>
            <div style="width:50%">
              <el-form-item label="设备类型">
                <el-select
                  filterable
                  disabled
                  v-model="liveData.type"
                  placeholder="请选择设备类型"
                >
                  <el-option
                    v-for="item in SBtypeData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="小分类">
            <el-select
              filterable
              disabled
              v-model="liveData.equipment_type"
              placeholder="请选择小分类"
            >
              <el-option
                v-for="item in typeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <div v-if="point_array.length != 0">
            <el-form-item
              :label="item.name"
              v-for="(item, index) in point_array"
              :key="index"
            >
              <div style="display: flex;">
                <el-input
                  placeholder="请输入测点编号"
                  v-model="item.number"
                  clearable
                  disabled
                >
                </el-input>
                <el-input
                  placeholder="请输入最小值"
                  v-model="item.min"
                  clearable
                  style="margin-left: 10px;"
                  disabled
                >
                </el-input>
                <el-input
                  style="margin-left: 10px;"
                  placeholder="请输入最大值"
                  v-model="item.max"
                  clearable
                  disabled
                >
                </el-input>
              </div>
            </el-form-item>
          </div>

<!--          <el-form-item label="nfc编号">
            <el-input
              v-model="liveData.nfc_code"
              :disabled="true"
              placeholder="请输入nfc编号"
            ></el-input>
          </el-form-item>-->
          <el-form-item label="封面图" label-width="120px">
            <div>
              <img
                :src="liveData.cover_id_url"
                alt=""
                v-if="
                  liveData.cover_id_url != '' && liveData.cover_id_url != null
                "
                style="width: 300px; object-fit: cover;margin-top: 5px;"
              />
            </div>
          </el-form-item>
          <div style="display: flex;">
            <div style="width:50%">
              <el-form-item label="设备编号">
                <el-input
                  v-model="liveData.it_code"
                  :disabled="true"
                  placeholder="请输入设备编号"
                ></el-input>
              </el-form-item>
            </div>
            <div style="width:50%">
              <el-form-item label="设备型号">
                <el-input
                  v-model="liveData.it_number"
                  :disabled="true"
                  placeholder="请输入设备型号"
                >
                </el-input>
              </el-form-item>
            </div>
          </div>
          <!-- <el-form-item label="河流类型">
            <el-select
              v-model="liveData.river_type"
              disabled
              placeholder="请选择河流类型"
            >
              <el-option
                v-for="item in river_typeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="is_type_name">
            <el-select
              v-model="liveData.river_id"
              disabled
              filterable
              :placeholder="is_type_placeholder"
            >
              <el-option
                v-for="item in river_idData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="选择地区">
            <el-cascader
              :disabled="true"
              class="cascader"
              v-model="selelected2"
              :options="area"
              :props="props2"
              clearable
              :popper-class="'hide'"
              ref="areaRef"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="选择工程">
            <el-cascader
              :disabled="true"
              class="cascader"
              v-model="selelected"
              :options="options"
              :props="props"
              clearable
              :popper-class="'hide'"
              ref="cascade"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="安装位置">
            <!-- <el-input
              v-model="liveData.install_position"
              :disabled="true"
              placeholder="请输入安装位置"
            ></el-input> -->
            <!-- <div style=" height: 500px;">
              <iframe
                id="mapPage"
                width="100%"
                height="100%"
                frameborder="0"
                :src="map_src"
              >
              </iframe>
            </div> -->
            <div class="address-map-div" id="address_map"></div>
          </el-form-item>
          <el-form-item label="投运时间">
            <el-date-picker
              v-model="liveData.use_time"
              disabled
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择投运时间"
              default-time="12:00:00"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="设备负责人">
            <el-input
              v-model="liveData.responsible_1"
              :disabled="true"
              placeholder="请输入设备负责人"
            ></el-input>
          </el-form-item>
          <el-form-item label="生产厂家">
            <el-input
              v-model="liveData.manufacturer"
              :disabled="true"
              placeholder="请输入生产厂家"
            ></el-input>
          </el-form-item>
          <el-form-item label="购买时间">
            <el-date-picker
              v-model="liveData.buy_time"
              disabled
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择购买时间"
              default-time="12:00:00"
            >
            </el-date-picker>
          </el-form-item>

          <div style="display: flex;">
            <div style="width:50%">
              <el-form-item label="设备责任人">
                <el-input
                  v-model="liveData.responsible_2"
                  :disabled="true"
                  placeholder="请输入设备责任人"
                >
                </el-input>
              </el-form-item>
            </div>
            <div style="width:50%">
              <el-form-item label="责任人联系方式">
                <el-input
                  v-model="liveData.responsible_phone_2"
                  :disabled="true"
                  placeholder="请输入责任人联系方式"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="质保期限">
            <el-date-picker
              v-model="liveData.validity_period"
              disabled
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择质保期限"
              default-time="12:00:00"
            >
            </el-date-picker>
          </el-form-item>
<!--          <el-form-item label="设备二维码" label-width="120px">
            <div>
              <img
                :src="liveData.it_qr_url"
                alt=""
                v-if="liveData.it_qr_url != '' && liveData.it_qr_url != null"
                style="width: 300px; object-fit: cover;margin-top: 5px;"
              />
            </div>
          </el-form-item>-->
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import { Message } from "element-ui";
import Utils from "@/utils/index.js";

export default {
  name: "liveAdd",
  components: {},
  data() {
    return {
      userInfo: JSON.parse(
        localStorage.getItem(this.$apis.getLocalKey().loginPersonnelInformation)
      ),
      loading: false,
      //富文本文档类型
      liveData: {
        name: "",
        equipment_type: "",
        nfc_code: "",
        cover_id_url: "",
        it_code: "",
        it_number: "",
        river_type: "",
        river_id: "",
        install_position: "",
        use_time: "",
        responsible_1: "",
        manufacturer: "",
        buy_time: "",
        responsible_2: "",
        responsible_phone_2: "",
        validity_period: "",
        it_qr_url: "",

        map_src: ""
      },

      options: [],
      props: {
        multiple: true,
        expandTrigger: "click"
      },
      area: [],
      props2: {
        multiple: true,
        expandTrigger: "click"
      },
      selelected: [],

      typeData: [],
      selelected2: [],
      SBtypeData: [
        {
          id: 1,
          name: "引水设备"
        },
        {
          id: 2,
          name: "传感设备"
        },
        {
          id: 3,
          name: "其他设备"
        }
      ],
      is_type_name: "",
      river_idData: [], //河流/水库id
      //河流类型
      river_typeData: [
        {
          id: 1,
          name: "河流"
        },
        {
          id: 2,
          name: "水库"
        },
        {
          id: 3,
          name: "坑塘"
        }
      ],
      is_state: "",

      lsQK: true,

      point_array: []
    };
  },
  created() {
    var _this = this;
    _this.gettypeData();
    _this.liveData = this.$route.query.data;
    _this.getoptionsData(); //选择工程级联列表
    _this.getareaData(); //选择地区级联列表

    // has_open 开启关闭，state 0 正常 1 异常 2 故障
    if (_this.liveData.state == 0) {
      _this.is_state = "正常";
    } else if (_this.liveData.state == 1) {
      _this.is_state = "异常";
    } else if (_this.liveData.state == 2) {
      _this.is_state = "故障";
    }

    // 地区级联列表回显
    let twoDArray2 = [];
    twoDArray2 = _this.liveData.json_rivers.map((item, index) => {
      return ([index] = [item.river_type, item.river_id]);
    });
    _this.selelected2 = twoDArray2;

    // 工程级联列表回显
    let twoDArray = [];
    twoDArray = _this.liveData.json_pro.map((item, index) => {
      return ([index] = [item.pro_type, item.pro_id]);
    });
    _this.selelected = twoDArray;

    // // 级联列表回显
    // for (let i = 0; i < _this.liveData.engines.length; i++) {
    //   _this.selelected.push(_this.liveData.engines[i].engine);
    // }
    // _this.selelected = _this.selelected;
    // console.log("_this.selelected:", _this.selelected);

    // 腾讯地图回显
    // var Mapdata = JSON.parse(_this.liveData.install_position);
    // // console.log("Mapdata:", Mapdata);
    // this.map_data = Mapdata;
    // var lat = Mapdata.lat;
    // var lng = Mapdata.lng;
    // let mat_url = this.map_data.url;
    // if (lat && lng) {
    //   mat_url += "&coord=" + lat + "," + lng;
    // }
    // this.map_src = mat_url;
    // 腾讯地图回显
    var Mapdata = JSON.parse(this.liveData.install_position);
    this.map_data = Mapdata;
    this.$nextTick(() => {
      Utils.initMapBy(this.map_data.lat, this.map_data.lng, "address_map");
    });

    if (_this.liveData.river_type == 1) {
      _this.is_type_name = "河流名称";
      _this.is_type_placeholder = "请选择河流";
      _this.$apis.equipment_river_list().then(res => {
        if (res.result == 0) {
          _this.river_idData = res.data;
        }
      });
    } else if (_this.liveData.river_type == 2) {
      _this.is_type_name = "水库名称";
      _this.is_type_placeholder = "请选择水库";
      _this.$apis.equipment_reservoir_list().then(res => {
        if (res.result == 0) {
          _this.river_idData = res.data;
        }
      });
    } else if (_this.liveData.river_type == 3) {
      _this.is_type_name = "坑塘名称";
      _this.is_type_placeholder = "请选择坑塘";
      _this.$apis.equipment_pond_list().then(res => {
        if (res.result == 0) {
          _this.river_idData = res.data;
        }
      });
    } else {
      _this.is_type_name = "";
      _this.is_type_placeholder = "";
      console.log("河流/水库类型有误！");
    }

    // 历史数据
    _this.realtimeHistoryQuery();
    _this.point_array = _this.liveData.point_array;
  },
  beforeDestroy() {
    clearInterval(this.null);
  },
  methods: {
    // 选择地区级联列表
    getareaData() {
      var _this = this;
      _this.$apis.unitywebpc_address_list().then(res => {
        if (res.result == 0) {
          _this.area = res.data;
        }
      });
    },
    // 选择工程级联列表
    getoptionsData() {
      var _this = this;
      _this.$apis.unitywebpc_engine_list().then(res => {
        if (res.result == 0) {
          _this.options = res.data;
        }
      });
    },
    realtimeHistoryQuery() {
      var _this = this;
      if (_this.liveData.equipment_type > 6) {
        _this.lsQK = false;
        return;
      }
      _this.lsQK = true;
      var datas = {
        site_id: -1,
        device_id: _this.liveData.id,
        device_type: _this.liveData.equipment_type,
        type: _this.liveData.equipment_type,
        date_type: "day"
      };
      _this.$apis.safe_realtime_history(datas).then(res => {
        if (res.result == 0) {
          if (_this.liveData.equipment_type == 1) {
            _this.LineChart124(res.data, "水位", "水位 m");
          } else if (_this.liveData.equipment_type == 2) {
            _this.LineChart124(res.data, "流量", "流量 m³/s");
          } else if (_this.liveData.equipment_type == 3) {
            _this.LineChart3(res.data);
          } else if (_this.liveData.equipment_type == 4) {
            _this.LineChart124(res.data, "雨量", "雨量 mm");
          } else if (_this.liveData.equipment_type == 5) {
            _this.LineChart5(res.data);
          } else if (_this.liveData.equipment_type == 6) {
            _this.LineChart6(res.data);
          }
        }
      });
    },
    // 1-水位 2-流量 4-雨量
    LineChart124(item, name, yname) {
      var _this = this;
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let LineChart = this.$echarts.init(this.$refs.LineChart124);
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: name,
          left: "center", //居中
          padding: [30, 0]
        },
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          type: "category",
          data: item.time
        },
        yAxis: {
          name: yname,
          type: "value"
        },
        series: [
          {
            data: item.date,
            type: "line",
            symbol: "circle", // 设置标记的图形为circle
            itemStyle: {
              color: "#fff",
              borderColor: "#0256ff",
              borderWidth: 1
            },
            symbolSize: 8,
            lineStyle: {
              color: "#0256ff"
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      LineChart.setOption(option);
    },
    // 3-水质
    LineChart3(item) {
      var _this = this;
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let LineChart1 = this.$echarts.init(this.$refs.LineChart3_1);
      let LineChart2 = this.$echarts.init(this.$refs.LineChart3_2);
      let LineChart3 = this.$echarts.init(this.$refs.LineChart3_3);
      // 指定图表的配置项和数据
      let option1 = {
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: item.time
        },
        yAxis: [
          {
            name: "PH",
            type: "value",
            splitLine: {
              show: false
            }
          },
          {
            name: "溶解氧",
            type: "value",
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "PH",
            type: "line",
            data: item.ph_date,
            symbol: "circle", // 设置标记的图形为circle
            itemStyle: {
              color: "#fff",
              borderColor: "#009db2",
              borderWidth: 1
            },
            symbolSize: 8,
            lineStyle: {
              color: "#009db2"
            }
          },
          {
            name: "溶解氧",
            type: "line",
            data: item.rjy_date,
            symbol: "circle", // 设置标记的图形为circle
            itemStyle: {
              color: "#fff",
              borderColor: "#0256ff",
              borderWidth: 1
            },
            symbolSize: 8,
            lineStyle: {
              color: "#0256ff"
            }
          }
        ]
      };
      let option2 = {
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: item.time
        },
        yAxis: [
          {
            name: "浊度",
            type: "value",
            splitLine: {
              show: false
            }
          },
          {
            name: "电导率",
            type: "value",
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "浊度",
            type: "line",
            data: item.zd_date,
            symbol: "circle", // 设置标记的图形为circle
            itemStyle: {
              color: "#fff",
              borderColor: "#009db2",
              borderWidth: 1
            },
            symbolSize: 8,
            lineStyle: {
              color: "#009db2"
            }
          },
          {
            name: "电导率",
            type: "line",
            data: item.ddl_date,
            symbol: "circle", // 设置标记的图形为circle
            itemStyle: {
              color: "#fff",
              borderColor: "#0256ff",
              borderWidth: 1
            },
            symbolSize: 8,
            lineStyle: {
              color: "#0256ff"
            }
          }
        ]
      };
      let option3 = {
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          type: "category",
          data: item.time
        },
        yAxis: {
          name: "温度",
          type: "value",
          splitLine: {
            show: false
          }
        },
        series: [
          {
            data: item.wd_date,
            type: "line",
            symbol: "circle", // 设置标记的图形为circle
            itemStyle: {
              color: "#fff",
              borderColor: "#009db2",
              borderWidth: 1
            },
            symbolSize: 8,
            lineStyle: {
              color: "#009db2"
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      LineChart1.setOption(option1);
      LineChart2.setOption(option2);
      LineChart3.setOption(option3);
    },
    // 5-闸门
    LineChart5(item) {
      var _this = this;
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let LineChart = this.$echarts.init(this.$refs.LineChart5);
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: item.time
        },
        yAxis: [
          {
            name: "流量 m³/s",
            type: "value",
            splitLine: {
              show: false
            }
          },
          {
            name: "开度 m",
            type: "value",
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "流量",
            type: "line",
            data: item.ll_date,
            symbol: "circle", // 设置标记的图形为circle
            itemStyle: {
              color: "#fff",
              borderColor: "#009db2",
              borderWidth: 1
            },
            symbolSize: 8,
            lineStyle: {
              color: "#009db2"
            }
          },
          {
            name: "开度",
            type: "line",
            data: item.kd_date,
            symbol: "circle", // 设置标记的图形为circle
            itemStyle: {
              color: "#fff",
              borderColor: "#0256ff",
              borderWidth: 1
            },
            symbolSize: 8,
            lineStyle: {
              color: "#0256ff"
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      LineChart.setOption(option);
    },
    // 6-电灌站
    LineChart6(item) {
      var _this = this;
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let LineChart = this.$echarts.init(this.$refs.LineChart6);
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: item.time
        },
        yAxis: [
          {
            name: "流量 m³/s",
            type: "value",
            splitLine: {
              show: false
            }
          },
          {
            name: "扬程 m",
            type: "value",
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "流量",
            type: "line",
            data: item.flow_date,
            symbol: "circle", // 设置标记的图形为circle
            itemStyle: {
              color: "#fff",
              borderColor: "#009db2",
              borderWidth: 1
            },
            symbolSize: 8,
            lineStyle: {
              color: "#009db2"
            }
          },
          {
            name: "扬程",
            type: "line",
            data: item.yc_date,
            symbol: "circle", // 设置标记的图形为circle
            itemStyle: {
              color: "#fff",
              borderColor: "#0256ff",
              borderWidth: 1
            },
            symbolSize: 8,
            lineStyle: {
              color: "#0256ff"
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      LineChart.setOption(option);
    },

    // 设备类型
    gettypeData() {
      var _this = this;
      var datas = {
        page: _this.page,
        size: 999
      };
      _this.$apis.equipment_type_list(datas).then(res => {
        if (res.result == 0) {
          _this.typeData = res.data;
        }
      });
    },
    back() {
      this.$router.back();
    }
  }
};
</script>

<style></style>
<style lang="scss" scoped>
/deep/ .el-cascader__tags .el-tag .el-icon-close {
  display: none;
}
</style>
